<template>
  <div class="content">
    <div class="video-wrap">
      <div
        class="video-item"
        @mouseover="showStop_fn()"
        v-if="record_src !== ''"
      >
        <div class="show-title">{{ show_txt }}</div>
        <video
          ref="video"
          v-show="showVideo"
          :src="record_src"
          width="100%"
          height="100%"
          object-fit:fill
          controls="controls"
          Content-Type="video/3gpp"
          autoplay
          @ended="onPlayerEnded($event)"
          @dispose="onPlayerdispose($event)"
        ></video>
        <div class="stop-btn" v-if="showStopBtn" @click.stop="stopFn()">
          <img :src="videoIcon.stop" alt="停止" title="停止" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//https://www.jianshu.com/p/7a580bbaf6de
//https://www.jianshu.com/p/2f2243d2591e
//play pause ended
//https://blog.csdn.net/c_qianxia5040/article/details/113441476?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link
import bus from "@/utils/bus";
export default {
  name: "VideoWrap",
  props: {},
  data() {
    return {
      player: null,
      record_src: "",
      files_arr: [],
      active_li_index: 0,
      showVideo: false,
      datas: {}, // 数据给video传name
      show_txt: "", //展示title
      videoIcon: {
        stop: require("@/assets/img/video-stop2.png"),
      },
      showStopBtn: true,
    };
  },
  created() {},
  computed: {
    // recordSearchUrl() {
    //   return this.$store.state.cameraPlay.recordSearchUrl;
    // },
    files() {
      return this.$store.state.cameraPlay.files;
    },
    record_li_index() {
      return this.$store.state.cameraPlay.record_li_index;
    },
  },
  mounted() {
    if (this.player !== null) {
      this.record_src == "";
      this.player = null;
    }

    this.initVideo();
    //初始的时候，3秒后隐藏关闭图标
    let that = this;
    setTimeout(() => {
      that.showStopBtn = false;
    }, 4000);
  },
  methods: {
    initVideo() {
      this.player = this.$refs.video;
    },
    // 视频播完回调
    onPlayerEnded($event) {
      this.$message.success("即将播放下个视频");
      setTimeout(() => {
        this.active_li_index++;
        this.record_src = this.files_arr[this.active_li_index].url;
        this.show_txt =
          this.files_arr[this.active_li_index].start_time +
          " 至 " +
          this.files_arr[this.active_li_index].end_time;
        //传给searchList，为了展示li选中的背景色
        this.$store.commit("cameraPlay/setAutoPlayIndex", this.active_li_index);
      }, 3000);
    },
    //鼠标悬停显示停止按钮
    showStop_fn() {
      this.showStopBtn = true;
      let that = this;
      setTimeout(() => {
        that.showStopBtn = false;
      }, 3000);
    },
    //单个停止
    stopFn() {
      if (this.player !== null) {
        this.record_src = "";
      }
    },
  },
  beforeDestroy() {
    if (this.player !== null) {
      this.record_src = "";
      this.player = null;
      //    document.getElementById('video父级元素ID').removeChild(video)
    }
  },
  watch: {
    files: {
      handler(_new) {
        // console.log(_new);
        if (_new != "") {
          this.files_arr = _new;
          this.record_src = _new[this.active_li_index].url;
          this.showVideo = true;

          this.show_txt =
            this.files_arr[this.active_li_index].start_time +
            "  至  " +
            this.files_arr[this.active_li_index].end_time;
        }
      },
      deep: true,
      immediate: false,
    },
    record_li_index: {
      handler(_new) {
        // console.log(_new);
        if (_new != "") {
          this.active_li_index = _new;
          this.record_src = this.files_arr[this.active_li_index].url;
          this.showVideo = true;
          this.show_txt =
            this.files_arr[this.active_li_index].start_time +
            "  至  " +
            this.files_arr[this.active_li_index].end_time;
        }
      },
      deep: true,
      immediate: false,
    },
  },
};
</script>
<style scoped>
.content {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
  margin-top: 10px;
}
.video-wrap {
  width: 100%;
  height: 100%;
  box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.video-item {
  border: 1px solid #272d38;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}
.show-title {
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
}
.stop-btn {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.stop-btn img {
  width: 70%;
  height: 70%;
}
</style>
